import { Col, Row, Tooltip } from "antd";
import React from "react";
import styles from "@/layout/Configuration/Configuration.module.scss";
import { QuestionCircleOutlined } from "@ant-design/icons";
interface Props {
  label: string;
  children: React.ReactNode;
  illustrate?: string;
  labelSpan?: number;
  valueSpan?: number;
}
export function FormRowCol(props: Props) {
  return (
    <Row>
      <Col className={styles.formLabel} span={props.labelSpan || 10}>
        {props.label}
        {props.illustrate && (
          <Tooltip placement="top" title={props.illustrate}>
            <QuestionCircleOutlined style={{ marginLeft: 5 }} />
          </Tooltip>
        )}
      </Col>
      <Col span={props.valueSpan || 14}>{props.children}</Col>
    </Row>
  );
}
